<template>
  <div>
    <div class="category">
      <!-- 标签 -->
      <div>
        <span
          :class="areaActive == album.areaCode ? 'tag_active' : ''"
          v-for="(album, key) in albumArea"
          :key="key"
          @click="changeTagValue(album.areaCode, albumType)"
        >
          {{ album.areaName }}
        </span>
      </div>

      <!-- 按钮 -->
      <div class="btns">
        <div
          :class="albumType == 'hot' ? 'btnActive' : ''"
          @click="changeTagValue(areaActive, 'hot')"
        >
          推荐
        </div>
        <div
          :class="albumType == 'new' ? 'btnActive' : ''"
          @click="changeTagValue(areaActive, 'new')"
        >
          全部
        </div>
      </div>
    </div>

    <!-- 新碟 -->
    <div class="album">
      <div class="leftContent" v-if="albumType == 'hot' && areaActive == 'ALL'">
        <div>
          本 <br />周 <br />
          新 <br />碟 <br />
        </div>
      </div>
      <div class="leftContent" v-else>
        <p>{{ month }}</p>
        <p>{{ date }}</p>
      </div>

      <div class="newAlbum">
        <div v-for="(item, key) in albumList" :key="key">
          <el-image
            style="width: 160px; height: 160px"
            :src="item.picUrl"
            fit="fill"
            @click="toAlbumlistPage(item.id)"
          ></el-image>
          <div class="plate"></div>
          <div class="play">
            <i class="el-icon-caret-right"></i>
          </div>
          <div class="name" @click="toAlbumlistPage(item.id)">
            {{ item.name }} <span>{{ item.alias }}</span>
          </div>
          <div class="artistname" @click="toSongerDetailPage(item.artistId)">
            {{ item.artistname }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 新碟上架地区
      albumArea: [
        { areaName: '全部', areaCode: 'ALL' },
        { areaName: '华语', areaCode: 'ZH' },
        { areaName: '欧美', areaCode: 'EA' },
        { areaName: '日本', areaCode: 'JP' },
        { areaName: '韩国', areaCode: 'KR' },
      ],
      // 当前标签
      areaActive: 'ALL',
      //新碟类型
      albumType: 'hot',
      // 新碟列表
      albumList: [],
    }
  },
  created() {
    this.getAlbumList()
  },
  watch: {
    areaActive: function (newVal, oldVal) {
      if (this.albumType == 'new') {
        return this.getAllAlbumList()
      }
      this.getAlbumList()
    },
    albumType: function (newVal, oldVal) {
      if (this.albumType == 'new') {
        return this.getAllAlbumList()
      }
      this.getAlbumList()
    },
  },
  computed: {
    date() {
      const time = new Date()
      return time.getFullYear()
    },
    month() {
      const time = new Date()
      return (time.getMonth() + 1 + '').padStart(2, '0')
    },
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeIsActive',
      'changeSongerId',
      'changeAlbumlistId',
    ]),

    //   获取新碟上架列表
    async getAlbumList() {
      const { data: res } = await this.$http({
        url: `/top/album?offset=0&limit=30&area=${this.areaActive}&type=hot`,
        withCredentials: true, //关键
      })
      // console.log(res)

      let amount = 0
      let tempListDatas = []
      if (this.areaActive == 'ALL') {
        for (const item of res.weekData) {
          if (amount >= 16) {
            break
          }
          let listObj = {}

          listObj.id = item.id
          listObj.name = item.name
          listObj.picUrl = item.picUrl
          listObj.artistId = item.artist.id
          listObj.artistname = item.artist.name

          listObj.alias = ''
          if (!item.alias[0]) {
            // listObj.alias = ''
          } else {
            listObj.alias = '(' + item.alias[0] + ')'
          }

          amount++
          tempListDatas.push(listObj)
        }
      } else {
        for (const item of res.monthData) {
          if (amount >= 16) {
            break
          }
          let listObj = {}

          listObj.id = item.id
          listObj.name = item.name
          listObj.picUrl = item.picUrl
          listObj.artistId = item.artist.id
          listObj.artistname = item.artist.name

          listObj.alias = ''
          if (!item.alias[0]) {
            // listObj.alias = ''
          } else {
            listObj.alias = '(' + item.alias[0] + ')'
          }

          amount++
          tempListDatas.push(listObj)
        }
      }

      this.albumList = tempListDatas
      // console.log(this.albumList)
    },
    //   获取全部新碟列表
    async getAllAlbumList() {
      const { data: res } = await this.$http({
        url: `/album/new?limit=16&area=${this.areaActive}`,
        withCredentials: true, //关键
      })
      // console.log(res)

      let tempListDatas = []
      res.albums.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.picUrl = item.picUrl
        listObj.artistId = item.artist.id
        listObj.artistname = item.artist.name

        if (!item.alias[0]) {
          listObj.alias = ''
        } else {
          listObj.alias = '(' + item.alias[0] + ')'
        }

        return tempListDatas.push(listObj)
      })

      this.albumList = tempListDatas
      // console.log(this.albumList)
    },
    // 改变参数重新获取列表
    changeTagValue(area, type) {
      this.areaActive = area
      this.albumType = type
    },
    // 跳转到歌手详情页面
    toSongerDetailPage(songerId) {
      const info = {
        path: '/view/songerdetail',
        songerId: songerId,
      }

      this.changePath(info.path)
      this.changeSongerId(info.songerId)

      this.$emit('getSongerDetailInfo')
    },
    // 传递 专辑数据，并跳转到专辑页面
    toAlbumlistPage(albumlistId) {
      const info = {
        path: '/view/albumlist',
        isActive: '',
        albumlistId: albumlistId,
      }

      this.changePath(info.path)
      this.changeIsActive(info.isActive)
      this.changeAlbumlistId(info.albumlistId)

      this.$emit('getAlbumlistId')
    },
  },
}
</script>

<style lang="less" scoped>
.category {
  position: relative;
  padding-top: 10px;
  padding-bottom: 14px;
  display: flex;
  justify-content: space-between;
  > div {
    > span {
      padding: 0px 6px;
      font-size: 15px;
      color: #373737;
      cursor: pointer;
    }
    > span.tag_active {
      color: black;
      font-weight: bold;
    }
  }
  .btns {
    display: flex;
    div {
      padding: 2px 12px;
      border-radius: 12px;
    }
    .btnActive {
      color: #ec4141;
      background-color: #fdeded;
    }
  }
}

.album {
  display: flex;
  > .leftContent {
    width: 60px;
    p {
      margin: 0;
    }
    div {
      font-size: 20px;
      text-align: right;
      padding-right: 23px;
    }
    p:nth-child(1) {
      font-size: 32px;
    }
  }
  > .newAlbum {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 880px;
    > div {
      margin: 0px 54px 20px 0px;
      position: relative;
      cursor: pointer;
      .el-image {
        border-radius: 6px;
        box-shadow: 10px 0px 6px rgba(65, 65, 65, 0.247);
      }
      > .plate {
        position: absolute;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background-color: black;
        top: 0;
        z-index: -2;
        right: -26px;
      }
      > .play {
        position: absolute;
        left: 56px;
        top: 56px;
        border-radius: 50%;
        width: 52px;
        height: 52px;
        background-color: white;
        transition: 1s;
        opacity: 0;
        > .el-icon-caret-right {
          font-size: 42px;
          color: #ec4141;
          position: relative;
          left: 6px;
          top: 5px;
        }
      }
      > .name {
        width: 160px;
        font-size: 15px;
        padding-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        //将对象作为弹性伸缩盒子模型显示。
        display: -webkit-box;
        //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
        -webkit-box-orient: vertical;
        //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
        -webkit-line-clamp: 2;

        > span {
          color: #8e8e8e;
        }
      }
      > .artistname {
        width: 160px;
        font-size: 14px;
        padding-top: 6px;
        color: #8e8e8e;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      > .artistname:hover {
        color: black;
      }
    }
    div:hover {
      transition: 1s;
      .play {
        opacity: 1;
      }
    }
  }
}
</style>